import React, { useState, useEffect } from 'react'
import { SetOutline, StarFill, RightOutline, CheckShieldFill, QuestionCircleFill, MailFill, TeamFill } from 'antd-mobile-icons'
import "./Hs.css"
import { List, Switch } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'


export default function User() {
  let [obj, setobj] = useState({})
  useEffect(() => {
    get_id()
  }, [])
  let get_id = async () => {
    let id = localStorage.getItem("user_id")
    let { data } = await axios.get("http://127.0.0.1:3000/getuset_id?id=" + id)
    if (data.obj.name == "无") {
      data.obj.name = '用户' + id.slice(id.length - 4)
    }
    setobj(data.obj)
  }
  const navigate = useNavigate()
  return (
    <div>
      <div style={{ background: "#1fc878", height: "350px" }}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <h1 style={{ color: "white", padding: "30px 20px" }}>我的</h1>
          <SetOutline style={{ fontSize: "25px", padding: "30px 20px", color: "white" }} onClick={() => {
            navigate("/settings")
          }} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ display: "flex" }} onClick={() => { navigate("/Personalinformation") }}>
            <img style={{ width: "80px", height: "80px", borderRadius: "50%", padding: "20px" }} src={obj.img} alt="" />
            <div>
              <p style={{ color: "white", padding: "20px 10px 20px 0px", fontSize: "20px" }}>{obj.name}</p>
              <p style={{ color: "white" }}>{obj.test}</p>
            </div>
          </div>
          <div style={{ color: "white", background: "#45d094", padding: "3px 10px", borderTopLeftRadius: "10px", borderBottomLeftRadius: "10px" }} onClick={() => { navigate("/personalhomepage") }}>个人主页▶</div>
        </div>
        <div style={{ color: "white", display: "flex", justifyContent: "space-around", textAlign: "center" }}>
          <div onClick={() => { navigate("/runningrecord") }}>
            <h1 className='hs_h1'>0</h1>
            <p>跑步记录</p>
          </div>
          <div onClick={() => { navigate("/ranking") }}>
            <h1 className='hs_h1'>15</h1>
            <p>同校排名</p>
          </div>
          <div onClick={() => { navigate("/ranking") }}>
            <h1 className='hs_h1'>37</h1>
            <p>全网排名</p>
          </div>
        </div>
      </div>
      <div style={{ background: "#f7f7f7", height: "calc(100vh - 350px)" }}>
        <List header=' '>
          <List.Item prefix={<StarFill />} onClick={() => { navigate("/mycollection") }}>
            我的收藏
          </List.Item>
        </List>
        <List header=' '>
          <List.Item prefix={<CheckShieldFill />} onClick={() => { navigate("/authenticationmain") }}>
            身份认证
          </List.Item>
        </List>
        <List header=' '>
          <List.Item prefix={<QuestionCircleFill />} onClick={() => { navigate("/helpcenter") }}>
            帮助中心
          </List.Item>
          <List.Item prefix={<MailFill />} onClick={() => { navigate("/feedback") }}>
            意见反馈
          </List.Item>
          <List.Item prefix={<TeamFill />} onClick={() => { navigate("/aboutus") }}>
            关于我们
          </List.Item>
        </List>
      </div>
    </div>
  )
}
